<template lang="">
  <div>
    <el-table
      v-loading='loading'
      :data="DispatchOrderList"
      row-key="id"
      :row-class-name="tableRowClassName"
      border
    >
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="item.prop"
        :label="item.label"
        :width="item.prop == 'sort' ? '400px' : ''"
      >
        <template slot-scope="scope">
          <!-- <template v-if="item.prop == 'sort'">
            <div class="handle_move">
              <i class="el-icon-d-caret" />
              <span style="margin-left: 10px">{{scope.row[`${item.prop}`]}}</span>
            </div>
          </template> -->
          <template>
            <span style="margin-left: 10px">{{
              scope.row[`${item.prop}`]
            }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getDispatchOrderList,setDispatchOrder } from "@/api/product/index";
import Sortable from "sortablejs";
export default {
  data() {
    return {
      pagination: {
        per_page: 10,
        page: 1,
      },
      oldIndex: null,
      newIndex: null,
      total: 0,
      DispatchOrderList: [],
      col:[
        { label: "派单顺序", prop: "name" },
        { label: "排序", prop: "sort" }
      ],
      sort_arr:[],
      loading:'true'
    };
  },
  mounted() {
    this.get_DispatchOrderList();
    this.init();
  },
  methods: {
    get_DispatchOrderList() {
        this.sort_arr=[]
      getDispatchOrderList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.DispatchOrderList = res.data;
          this.loading=false
          this.DispatchOrderList.forEach(item=>{
            let obj={
                id:item.id,
                sort:item.sort
            }
            this.sort_arr.push(obj) 
            }) 
        }
      });
      console.log( this.sort_arr)
    },
    set_DispatchOrder(arr){
        this.loading=true
        setDispatchOrder({
            sort_arr:arr
        }).then(res=>{
            if(res.code == 200) {
                this.loading=false
               this.get_DispatchOrderList() 
            }
        })
       
    },
    init(){
        const _this = this;	
		// 1. 获取拖拽元素的父元素
		// 因为使用的element的table 所以可直接获取tbody
		let el =  document.querySelector(".el-table__body-wrapper tbody");
		
		
		// 2. 创建并配置相关参数
		var sortable = new Sortable(el, {
			// 此处进行配置 及 回调函数的使用
			
			// 因为我的需求是只有按住手柄才能进行拖拽，故而设置此参数
			// handle:'.handle_move', // css选择器的字符串 若设置该值，则表示只有按住拖动手柄才能使列表单元进行拖动
			
			// 我的需求是行拖拽，所以该值设置为行class
			draggable:'.el-table__row', // 允许拖拽的项目类名	
			// 因为拖拽过程中不尽兴位置调整，所以就要记录拖拽行初始位置以及目标位置
			// 拖拽中 回调函数
			 onMove(customEvent) {
	          // 禁止在拖拽过程中交换位置
	          // 可将初始位置及目标位置进行记录
	          _this.oldIndex = customEvent.dragged.rowIndex; //  初始位置
	          _this.newIndex = customEvent.related.rowIndex; // 目标位置
	          return false;  // 不进行交换
	          // 返回值有三个
	          // return false; — for cancel
	          // return -1; — insert before target
	          // return 1; — insert after target
	        },
			
			// 拖拽结束，调整位置
			onEnd() {
	          // 在拖拽结束后，获取初始及目标位置
	          const { newIndex, oldIndex } = _this;
	          const currRow = _this.sort_arr.splice(oldIndex, 1)[0];
	          _this.sort_arr.splice(newIndex, 0, currRow);
	          console.log(_this.sort_arr)
	          _this.newIndex = null;
	          _this.oldIndex = null;
              let sort_arr= _this.sort_arr[newIndex].sort

              _this.sort_arr[newIndex].sort= _this.sort_arr[oldIndex].sort
              _this.sort_arr[oldIndex].sort= sort_arr
              
              
              console.log(_this.sort_arr)
              _this.set_DispatchOrder(_this.sort_arr)


	        },
		})
	},
    // rowDrop() {
    //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
    //   const _this = this
    //   Sortable.create(tbody, {
    //     onEnd({ newIndex, oldIndex }) {

    //        console.log('3333',newIndex,oldIndex) 
    //             if (newIndex == oldIndex) return
    //             _this.DispatchOrderList.splice(
    //                 newIndex,
    //                 0,
    //                 _this.DispatchOrderList.splice(oldIndex, 1)[0]
    //             )
    //             var newArray = _this.DispatchOrderList.slice(0)
    //             _this.DispatchOrderList = []
    //             _this.$nextTick(function () {
    //                 _this.DispatchOrderList = newArray
    //             })
    //     }
    //   })
    // },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == this.newIndex) {
             return "warning-row";
      }
      return "";
    }
  },
};
</script>
<style  scoped>

.el-table>>>.el-table__body-wrapper tbody {
  cursor: move;
}
.el-table>>>.warning-row {
  background: #1168b9 !important;
  color: #fff!important;
}


</style>
